<template>
  <NavBar title="代理系统" color="#fff" colorText="#333" brg="#f8f8f8">
  <view class="agent-review-container">
	  <view class="agent-review-setion">	  
	
    <!-- 内容区域 -->
    <view class="content-area">
      <!-- 机器人图标 -->
      <view class="robot-section">
         <image class="robot-section-img" src="/static/pho4.png" mode=""></image>
      </view>
      
      <!-- 状态信息 -->
      <view class="status-section">
        <text class="status-title">审核中</text>
        <text class="status-desc">您的代理商申请已提交,我们正在审核中</text>
      </view>
      
      <!-- 进度条 -->
      <view class="progress-section">
        <view class="progress-item completed">
          <view class="progress-circle">
           <image  class="person-icon" src="/static/agent.png" mode=""></image>
          </view>
          <text class="progress-text">提交申请</text>
        </view>
        
        <view class="progress-line completed"></view>
        
        <view class="progress-item current">
          <view class="progress-circle">
			<image  class="person-icon" src="/static/agent1.png" mode=""></image>
          </view>
          <text class="progress-text">资料审核</text>
        </view>
        
        <view class="progress-line pending"></view>
        
        <view class="progress-item pending">
          <view class="progress-circle">
           <image  class="person-icon" src="/static/agent2.png" mode=""></image>
          </view>
          <text class="progress-text">审核完成</text>
        </view>
      </view>
      
      <!-- 预计审核时间 -->
      <view class="time-section">
        <text class="time-title">预计审核时间</text>
        <text class="time-value">1-3个工作日</text>
        <text class="time-note">我们会尽快完成审核,审核结果将通过短信通知您。</text>
      </view>
    </view>
    
    <!-- 返回首页按钮 -->
    <view class="home-button" @click="goHome">
      <text class="home-text">返回首页</text>
    </view>
    
    <!-- 客服信息 -->
    <view class="service-info">
      <text class="service-text">如有疑问, 请</text>
      <text class="service-link" @click="contactService">联系客服</text>
    </view>
	  </view>
  </view>
  </NavBar>
</template>

<script setup>
// 方法
const goBack = () => {
  uni.navigateBack()
}

const goHome = () => {
  uni.switchTab({
    url: '/pages/index/index'
  })
}

const contactService = () => {
  uni.navigateTo({
    url: '/pages/on-line/on-line'
  })
}
</script>

<style scoped>
.agent-review-container {
  min-height: 100vh;
 background: linear-gradient( 180deg, #C2DDFF 0%, #FFFFFF 100%);
  padding-top:180rpx;
}
.agent-review-setion{
	margin: 0 30rpx;
	background-color: #fff;
	 min-height: 95vh;
}
/* 状态栏 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 40rpx 0;
  height: 88rpx;
}

.time {
  font-size: 32rpx;
  font-weight: 600;
  color: #000000;
}

.status-icons {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.signal-icon,
.wifi-icon,
.battery-icon {
  width: 24rpx;
  height: 16rpx;
  background: #000000;
  border-radius: 2rpx;
}

.battery-icon {
  width: 32rpx;
  height: 16rpx;
  position: relative;
}

.battery-icon::after {
  content: '';
  position: absolute;
  right: -6rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 4rpx;
  height: 8rpx;
  background: #000000;
  border-radius: 0 2rpx 2rpx 0;
}
.robot-section-img{
	width: 156rpx;
	height: 230rpx;
}
/* 导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 40rpx;
  height: 88rpx;
}

.nav-left {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  font-size: 48rpx;
  font-weight: 300;
  color: #FFFFFF;
  line-height: 1;
}

.nav-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #000000;
  flex: 1;
  text-align: center;
  margin-left: -60rpx;
}

.nav-right {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder-btn {
  width: 40rpx;
  height: 30rpx;
  background: #FFFFFF;
  border-radius: 15rpx;
}

/* 内容区域 */
.content-area {
  padding: 40rpx;
  flex: 1;
}

/* 机器人图标 */
.robot-section {
  display: flex;
  justify-content: center;
  margin-bottom: 30rpx;
}

.robot-icon {
  position: relative;
  width: 200rpx;
  height: 200rpx;
}

.robot-head {
  width: 120rpx;
  height: 120rpx;
  background: #8B5CF6;
  border-radius: 60rpx;
  position: relative;
  margin: 0 auto;
}

.robot-antenna {
  width: 8rpx;
  height: 20rpx;
  background: #8B5CF6;
  position: absolute;
  top: -20rpx;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 4rpx;
}

.robot-screen {
  width: 60rpx;
  height: 40rpx;
  background: #1E40AF;
  border-radius: 8rpx;
  position: absolute;
  top: 30rpx;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rpx;
}

.screen-text {
  font-size: 20rpx;
  color: #FFFFFF;
  font-weight: bold;
}

.robot-body {
  width: 100rpx;
  height: 80rpx;
  background: #8B5CF6;
  border-radius: 50rpx 50rpx 20rpx 20rpx;
  position: absolute;
  top: 100rpx;
  left: 50%;
  transform: translateX(-50%);
}

.robot-x {
  position: absolute;
  top: 20rpx;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24rpx;
  color: #E3F2FD;
  font-weight: bold;
}

.robot-arm {
  width: 20rpx;
  height: 40rpx;
  background: #8B5CF6;
  border-radius: 10rpx;
  position: absolute;
  top: 20rpx;
  left: -10rpx;
  transform: rotate(-20deg);
}

.robot-tail {
  width: 30rpx;
  height: 60rpx;
  background: rgba(139, 92, 246, 0.3);
  border-radius: 15rpx;
  position: absolute;
  top: 40rpx;
  right: -20rpx;
  transform: rotate(15deg);
}

/* 状态信息 */
.status-section {
  text-align: center;
  margin-bottom: 80rpx;
}

.status-title {
  display: block;
  font-size: 48rpx;
  font-weight: 600;
  color: #000000;
  margin-bottom: 20rpx;
}

.status-desc {
  display: block;
  font-size: 28rpx;
  color: #999999;
  line-height: 1.5;
}

/* 进度条 */
.progress-section {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 80rpx;
  padding: 0 40rpx;
  background-color: #F5F5F5;
  border-radius: 20rpx;
  padding: 30rpx 40rpx;
}

.progress-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.progress-circle {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
}


.check-icon {
  font-size: 24rpx;
  color: #FFFFFF;
  font-weight: bold;
}

.person-icon {
 width: 46rpx;
 height: 46rpx;
}

.pending-circle {
  width: 20rpx;
  height: 20rpx;
  border: 3rpx solid #FFFFFF;
  border-radius: 50%;
}

.progress-text {
  font-size: 24rpx;
  color: #333333;
  text-align: center;
}

.progress-line {
  width: 80rpx;
  height: 4rpx;
  margin: 0 20rpx;
  margin-top: -30rpx;
}

.progress-line.completed {
  background: #4CAF50;
}

.progress-line.pending {
  background: repeating-linear-gradient(
    to right,
    #E0E0E0 0,
    #E0E0E0 8rpx,
    transparent 8rpx,
    transparent 16rpx
  );
}

/* 预计审核时间 */
.time-section {
  background: #F5F5F5;
  border-radius: 20rpx;
  padding: 30rpx;
  text-align: center;
  margin-bottom: 40rpx;
}

.time-title {
  display: block;
  font-size: 24rpx;
  font-weight: 500;
  color: #333333;
  margin-bottom: 16rpx;
}

.time-value {
  display: block;
  font-size: 32rpx;
  font-weight: 600;
  color: #565FFD;
  margin-bottom: 16rpx;
}

.time-note {
  display: block;
  font-size: 22rpx;
  color: #999999;
  line-height: 1.5;
}

/* 返回首页按钮 */
.home-button {
  background: #565FFD;
  border-radius: 20rpx;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30rpx 40rpx 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(139, 92, 246, 0.3);
}

.home-text {
  font-size: 36rpx;
  font-weight: 600;
  color: #FFFFFF;
}

/* 客服信息 */
.service-info {
	position: absolute;
	bottom: 30rpx;
	left: 50%;
	transform: translateX(-50%);
  text-align: center;
  padding: 0 40rpx 40rpx;
}

.service-text {
  font-size: 24rpx;
  color: #333;
}

.service-link {
  font-size: 24rpx;
  color: #565FFD;
  text-decoration: underline;
}
</style>
